<template>
  <div @click="onClick(0)">
    <div class="hairline-border">text</div>
    <div class="trigger">
      Hover me to see a height transition.
      <div class="el">content</div>
    </div>
    <Input type="text" v-model="number" @on-blur="onBlur" />
    <p>{{tweenedNumber.toFixed(0)}}</p>
    <p>冒泡捕获测试：</p>
    <div @click.capture="onClick(1)">
      console.log(1)
      <div @click.capture="onClick(2)">
        console.log(2)
        <div @click="onClick(3)">
          console.log(3)
          <div @click="onClick(4)">
            console.log(4)
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      number: 0,
      tweenedNumber: 0
    }
  },
  created () {
    this.$nextTick(() => {
      let el = document.querySelector('.el')// xss,csrf,钓鱼网站，网络劫持，控制台
      let height = el.scrollHeight
      el.style.setProperty('--max-height', height + 'px')
    })
  },
  methods: {
    onBlur () {
      // window.TweenLite.to(this.$data, 0.5, { tweenedNumber: this.number })
    },
    onClick (val) {
      console.log(val)
    }
  }
}
</script>

<style lang="less" scoped>
  .hairline-border {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  }

  @media (min-resolution: 2dppx) {
    .hairline-border {
      box-shadow: 0 0 0 0.5px;
    }
  }

  @media (min-resolution: 3dppx) {
    .hairline-border {
      box-shadow: 0 0 0 0.33333333px;
    }
  }

  @media (min-resolution: 4dppx) {
    .hairline-border {
      box-shadow: 0 0 0 0.25px;
    }
  }

  .el {
    transition: max-height 0.5s;
    overflow: hidden;
    max-height: 0;
  }

  .trigger {
    background-color: rgba(0, 0, 0, .2);
    padding: 20px;
  }

  .trigger:hover > .el {
    max-height: var(--max-height);
  }
</style>
